<template>
	<view v-if="pageShow">
		<view class="mainpadding" style="padding-bottom: 150rpx;">
			<view class="hei_text titletext bold" v-show="orderInfo.status==0">待接單</view>
			<view class="hei_text titletext bold" v-show="orderInfo.status==1">待服務</view>
			<view class="hei_text titletext bold" v-show="orderInfo.status==87">未付定金</view>
			<view class="hei_text titletext bold" v-show="orderInfo.status==3">待完成</view>
			<view class="hei_text titletext bold" v-show="orderInfo.status==5">製作中</view>
			<view class="hei_text titletext bold" v-show="orderInfo.status==6">待出貨</view>
			<view class="hei_text titletext bold" v-show="orderInfo.status==4">未付尾款</view>
			<view class="hei_text titletext bold" v-show="orderInfo.status==88">已放棄</view>
			<view class="main_size lv_text" v-show="orderInfo.status==99">已完成</view>
			<view class="mainpadding_top ffffff radius">
				<view class="flexbetween">
					<view class="flexleft" v-if="orderInfo.name">
						<u-icon name="account" color="#ff8505" size="16"></u-icon>
						<view class="hei_text main_size margin_left2">{{orderInfo.name}} <text class="margin_left1">{{maskMiddle(orderInfo.phone)}}</text></view>
						<view class="copyimg" @click="copy(orderInfo.phone)"></view>
					</view>
					<view class="flexright beihuolable radius" v-if="orderInfo.phone" @click="phone(orderInfo.phone)">
						<u-icon name="phone" color="#ff8505" size="18"></u-icon>
						<view class="xiaohuang">撥打電話</view>
					</view>
				</view>
				<view class="flexleft margin_top" v-if="orderInfo.address">
					<u-icon name="map" color="#ff8505" size="16"></u-icon>
					<view class="hei_text main_size margin_left2">{{orderInfo.address}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexleft">
						<u-icon name="clock" color="#ff8505" size="16"></u-icon>
						<view class="hei_text main_size margin_left2">{{http.timereturn(orderInfo.createtime * 1000)}}
						</view>
					</view>
					<view class="flexleft">
						<image v-if="orderInfo.address" @click.stop="daohang(orderInfo.address)" class="shopPhone"
							src="@/static/image/system/navigation.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="titletext hei_text bold">已點商品</view>
				<view class="pdl" v-for="(item,index) in orderInfo.goods_data" :key="index">
					<view class="flexleft margin_top dingwei">
						<view class="listleftimg radius margin_right">
							<image class="listleftimg radius" :src="item.logoimage_text" mode=""></image>
						</view>
						<!-- <view class="saleLableclass" v-if="item.salename">{{item.salename}}</view> -->
						<view style="width: 100%;">
							<view class="hei_text main_size bold" v-if="item.salename">【{{item.salename}}】</view>
							<view class="flexleft">
								<view class="hei_text main_size bold">{{item.goods_name}}</view>
								<view class="copyimg" @click="copy(item.goods_name)"></view>
							</view>
							<view class="xiaohui flexbetween" v-if="item.wei || item.hei">
								<text>尺寸：{{item.wei}}*{{item.hei}}</text>
								<text>用量：{{item.formulacount}}{{item.size}}</text>
							</view>
							<view class="xiaolan" v-if="item.spunatdata_text && item.spunatdata_text.length">
								規格：<text class="margin_right1" v-for="(value) in item.spunatdata_text"
									:key="value.spunatid">{{value.spunatname}}*{{value.num}}&nbsp;&nbsp;&nbsp;</text>
							</view>
							<view class="flexbetween">
								<view class="main_size huang_text bold">
									${{Number(item.d_price).toFixed(0)}}&nbsp;&nbsp;&nbsp;x{{item.num}}</view>
								<view class="main_size huang_text bold">${{Number(item.price).toFixed(0)}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">商品合計</view>
					<view class="huang_text main_size bold">${{orderInfo.goods_money || 0}}</view>
				</view>

				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">稅金</view>
					<view class="huang_text main_size">${{orderInfo.s_money || 0}}</view>
				</view>
				<view v-if="orderInfo.payinfo.length">
					<view v-for="item in orderInfo.payinfo" :key="item.id">
						<view class="flexbetween margin_top1" v-if="item.paytype!=0">
							<view class="hei_text main_size bold">{{returnzftext(item.paytype)}} <text
									v-if="item.payprice_type!=1">({{item.payprice_type==2?'訂金':'尾款'}})</text> </view>
							<view class="huang_text main_size bold">-${{item.pay_price}}</view>
						</view>
					</view>
				</view>
				<view class="shanghuax margin_top1"></view>
				<view class="flexbetween margin_top1 ">
					<view class="hei_text main_size bold">訂單總計</view>
					<view class="huang_text main_size bold">${{orderInfo.count_money || 0}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">已收金額</view>
					<view class="huang_text main_size">${{orderInfo.pay_price}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">未收金額</view>
					<view class="hong_text main_size">${{Number(orderInfo.count_money) - Number(orderInfo.pay_price)}}
					</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius" v-if="orderInfo.status==87 || orderInfo.status==4">
				<view class="hei_text main_size bold">收款協定</view>
				<view class="flexbetween margin_top1" v-if="orderInfo.status==87">
					<view class="hei_text main_size bold">訂金</view>
					<view class="huang_text main_size bold">${{orderInfo.d_money || 0}}</view>
				</view>
				<view class="flexbetween margin_top1" v-if="orderInfo.status==87 || orderInfo.status==4">
					<view class="hei_text main_size bold">尾款</view>
					<view class="huang_text main_size">${{orderInfo.w_money || 0}}</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius" v-if="orderInfo.images || orderInfo.content">
				<view class="titletext hei_text bold">訂單備注</view>
				<view class="flexleft">
					<view class="itemimgBox flexcenter margin_top1" v-for="(value,i) in orderInfo.images_text" :key="i"
						@click.stop="lbtpriview(i,orderInfo.images_text)">
						<image class="listleftimg radius" :src="value" mode=""></image>
					</view>
				</view>
				<view class="hui_text main_size margin_top1">{{orderInfo.content}}</view>
			</view>
			<view class="mainpadding_top ffffff radius" v-if="orderInfo.opentype!==-1 && orderInfo.fpinfo!=null"
				@click="gofpDetail(orderInfo.fpinfo)">
				<view class="flexbetween">
					<view class="titletext hei_text bold">發票信息</view>
					<text class="weikai" v-if="orderInfo.fpinfo && orderInfo.fpinfo.is_ly==1">未列印</text>
					<text class="yikai" v-if="orderInfo.fpinfo && orderInfo.fpinfo.is_ly==2">已列印</text>
				</view>
				<view class="flexbetween bold margin_top">
					<view class="flexleft">
						<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==0">紙本</view>
						<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==1">載具</view>
						<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==2">統編</view>
						<view class="xiaolan bold main_size lanlable" v-if="orderInfo.opentype==3">捐贈</view>
						<view v-if="orderInfo.fpinfo && orderInfo.fpinfo.BuyerIdentifier!='0000000000' && orderInfo.opentype==2"
							class="bold xiaolan margin_left2 ershib">{{orderInfo.fpinfo.BuyerIdentifier}}</view>
						<view v-if="orderInfo.fpinfo && orderInfo.opentype==1" class="bold xiaolan margin_left2 titletext">
							{{orderInfo.fpinfo.BuyerName}}
						</view>
					</view>
					<view class="flexright"  v-if="orderInfo.fpinfo && orderInfo.fpinfo.invoice_number">
						<view class="bold main_size margin_right1" :class="orderInfo.fpinfo.status==3?'xiaohong':'xiaolan'">
							發票號碼：{{orderInfo.fpinfo.invoice_number}}</view>
						<view class="xiaohong bold main_size" v-if="orderInfo.fpinfo.status==3">作廢</view>
					</view>
				</view>
				<view class="flexbetween bold margin_top" v-if="orderInfo.opentype==2">
					<view class="xiaolan bold main_size" v-if="orderInfo.tbmc">發票抬頭 </view>
					<view class="xiaolan bold main_size" v-if="orderInfo.tbmc">{{orderInfo.tbmc}}</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff line_b9"
				v-if="((orderInfo.opentype==-1 && appkey) || (orderInfo.fpinfo==null && appkey)) && orderInfo.status==99">
				<view class="flexbetween">
					<view class="text_weight color_san white_nowrap">發票類型
					</view>
					<view class="listbtnhuang" @click="kailifp">開立發票</view>
				</view>
				<view class="margin_top flexbetween">
					<view :class="opentype==0?'flexleft select':'flexleft noSelect'" @click="opentype=0">
						<image class="vote1Img"
							:src="opentype==0?'@/static/images/mine/vote1_active.png':'@/static/images/mine/vote1.png'"
							mode=""></image>
						<view>紙本</view>
					</view>
					<view :class="opentype==1?'flexleft select':'flexleft noSelect'" @click="opentype=1;">
						<image class="vote2Img"
							:src="opentype==1?'@/static/images/mine/vote2_active.png':'@/static/images/mine/vote2.png'"
							mode=""></image>
						<view>載具</view>
					</view>
					<view :class="opentype==2?'flexleft select':'flexleft noSelect'"
						@click="opentype=2;">
						<image class="vote3Img"
							:src="opentype==2?'@/static/images/mine/vote3_active.png':'@/static/images/mine/vote3.png'"
							mode=""></image>
						<view>統編</view>
					</view>
					<view :class="opentype==3?'flexleft select':'flexleft noSelect'" @click="opentype=3;">
						<image class="vote4Img"
							:src="opentype==3?'@/static/images/mine/vote4_active.png':'@/static/images/mine/vote4.png'"
							mode=""></image>
						<view>捐贈</view>
					</view>
				</view>
				<view class="invoiceInput margin_top flexbetween" v-show="opentype!=0">
					<input class="text_b" type="text" placeholder="請輸入手機載具" v-show="opentype==1" v-model="tbcode">
					<input class="text_b" type="text" placeholder="請輸入統一編碼" @blur="getTt()" v-show="opentype==2"
						v-model="tbcode">
					<input class="text_b" type="text" placeholder="請輸入捐贈碼" v-show="opentype==3" v-model="tbcode">
					<view class="" v-show="opentype==1 || opentype==3" @click="getCode()">
						<u-icon name="scan" color="#ffb800" size="28"></u-icon>
					</view>
				</view>
				<view class="invoiceInput margin_top" v-show="opentype==2">
					<input class="text_b" type="text" placeholder="請輸入發票抬頭" v-model="tbmc">
				</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="flexbetween">
					<view class="hei_text main_size bold">訂單編號</view>
					<view class="hui_text main_size bold">{{orderInfo.order_sn}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">下單時間</view>
					<view class="hui_text main_size bold">{{http.timereturn(orderInfo.createtime * 1000)}}</view>
				</view>
			</view>
		</view>
		<view class="posibottom mainpadding flexright ffffff">
			<view class="listbtnhui" v-show="orderInfo.status==0 ||orderInfo.status==3 || orderInfo.status==87"
				@click.stop="cancelOrder(listid)">放棄訂單</view>
			<view class="listbtnhuang margin_left2" v-show="orderInfo.status==0" @click.stop="takingOrder(listid)">
				確認接單</view>
			<view class="listbtnhuang margin_left2" v-show="orderInfo.status==1" @click.stop="startService(listid)">
				開始服務</view>
			<view class="listbtnhuang" v-show="orderInfo.status==87" @click="enddjOrdercall(orderInfo)">確認訂金</view>
			<view class="listbtnhuang" v-show="orderInfo.status==3" @click.stop="selectService(listid)">選擇服務</view>
			<view class="listbtnhuang" v-show="orderInfo.status==87" @click.stop="selectService(listid)">訂單修改</view>
			<view class="listbtnhuang margin_left2" v-show="orderInfo.status==4" @click.stop="overService(orderInfo)">
				確認尾款
			</view>
			<!-- <view class="listbtnhui" v-show="orderInfo.status==99">開具發票</view> -->
			<!-- <view class="listbtnhui" @click.stop="invoicedetail">发票明細</view> -->
			<!-- <view class="listbtnhuang margin_left2" v-show="orderInfo.status==99">查看评价</view> -->
		</view>
		<u-modal :show="showConfirm" showCancelButton confirmColor="#ffb800" @cancel="showConfirm=false"
			confirmText="確認" cancelText="取消" @confirm="orderConfirm">
			<view class="slot-content color_ling text_weight text">
				{{text}}
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageShow: false,
				listid: "",
				orderInfo: {},
				showConfirm: false,
				text: "你確定要放棄此訂單嗎？",
				
				// 開發票邏輯
				opentype: 0, //開票類型 0紙本 1載具 2統編 3捐贈
				tbcode: "", //開票内容
				tbcode1: "",
				jzcode: "",
				zjcode: "",
				tbmc: "",
				appkey: "",
			}
		},
		onLoad(options) {
			this.appkey = uni.getStorageSync("appkey")
			uni.$on("returnCode", data => {
				this.tbcode = data
			})
			this.listid = options.id
		},
		onShow() {
			this.getDetail()
		},
		onUnload() {
			uni.$off("returnCode")
		},
		watch: {
			opentype(newval){
				if(this.opentype==0)this.tbcode = ""
				if(this.opentype==1)this.tbcode = this.zjcode
				if(this.opentype==2)this.tbcode = this.tbcode1
				if(this.opentype==3)this.tbcode = this.jzcode
			}
		},
		methods: {
			// 开立发票
			kailifp() {
				if (this.opentype == 2 && this.tbcode.length != 8) {
					this.http.toast("請輸入正確統編")
					return false
				}
				if (this.opentype == 2 && this.tbmc == "") {
					return false
				}
				this.http.request('/api/ordercall/ordercallKjFp', 'GET', {
					opentype: this.opentype,
					tbcode: this.tbcode,
					tbmc: this.tbmc,
					id: this.listid
				}).then(res => {
					this.http.toast(res.msg)
					if (res.code == 1) {
						this.getDetail()
					}
				})
			},
			getCode() {
				uni.navigateTo({
					url: "/pages/my/getcodetwm"
				})
			},
			getTt() {
				if (this.opentype != 2) {
					return false
				}
				this.http.request("/api/user/getTbmc", "GET", {
					tbcode: this.tbcode
				}).then(res => {
					if (res.code == 1) {
						this.tbmc = res.data.tbinfo.name
					}
				})
			},
			gofpDetail(fpInfo) {
				if (fpInfo.id) {
					uni.navigateTo({
						url: "/pages/workbench/invoiceDetail?id=" + fpInfo.id
					})
				}
			},
			async startService(id) { //開始服務
				let res = await this.http.request('/api/Ordercall/fwOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					// this.http.toast("接單成功")
					this.getDetail()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}

			},
			selectService(id) { //選擇服務
				uni.setStorageSync("order_call_id", id)
				uni.navigateTo({
					url: "/pages/callOutOrder/xuanzefw?type=1"
				})
			},
			enddjOrdercall(item) { //確認訂金
				if (item.image) {
					this.http.modal('提示', "是否確認訂金", true, (resp) => {
						if (resp) {
							this.http.request('/api/Ordercall/enddjOrdercall', 'POST', {
								id
							}).then(res => {
								if (res.code == 1) {
									this.http.toast("操作成功")
									this.getList()
								} else {
									this.http.toast(res.msg)
								}
							})
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/callOutOrder/callsk?id=" + item.id + "&total_price=" + item.d_money
					})
				}
			},
			async overService(item) { //確認尾款
				if (item.image1) {
					this.http.modal('提示', "是否確認尾款", true, (resp) => {
						if (resp) {
							this.http.request('/api/Ordercall/enddjOrdercall', 'POST', {
								id
							}).then(res => {
								if (res.code == 1) {
									this.http.toast("操作成功")
									this.getList()
								} else {
									this.http.toast(res.msg)
								}
							})
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/callOutOrder/callsk?id=" + item.id + "&total_price=" + item.w_money
					})
				}

			},
			async takingOrder(id) { //確認接單
				let res = await this.http.request('/api/Ordercall/addOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("接單成功")
					this.getDetail()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			cancelOrder() { //放弃订單
				this.showConfirm = true
			},
			async orderConfirm() { //確認放弃订單
				let res = await this.http.request('/api/Ordercall/endOrdercall', 'POST', {
					id: this.listid
				})
				if (res.code == 1) {
					this.http.toast("放棄成功")
					this.getDetail()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
				this.showConfirm = false
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必須要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			async getDetail() { //確認放弃订單
				let res = await this.http.request('/api/Ordercall/deailOrdermake', 'POST', {
					id: this.listid
				})
				this.$set(res.data, "images_text", [])
				if (res.data.images) {
					res.data.images.split(",").forEach(value => {
						value = this.imgUrlUser + value
						res.data.images_text.push(value)
					})
				}
				res.data.goods_data.forEach(item => {
					this.$set(item, "logoimage_text", this.imgUrlUser + item.logoimage)
				})
				if (this.orderInfo.opentype == -1 && res.data.user) {
					let fpinfo = res.data.user
					if (fpinfo.opentype != 0) {
						this.opentype = fpinfo.opentype
					}
					if (fpinfo.jzcode) {
						this.jzcode = fpinfo.jzcode
						this.tbcode = fpinfo.jzcode
					}
					if (fpinfo.tbcode) {
						this.tbcode = fpinfo.tbcode
						this.tbcode1 = fpinfo.tbcode
					}
					if (fpinfo.zjcode) {
						this.zjcode = fpinfo.zjcode
						this.tbcode = fpinfo.zjcode
					}
					this.tbmc = fpinfo.tbmc
				}
				this.orderInfo = res.data
				this.pageShow = true
			},
			// 開始服務
			startservice() {
				uni.navigateTo({
					url: "/pages/callOutOrder/xuanzesp"
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获錯误{makePhoneCall:fail cancel}
				})
			},
			// 发票明細
			invoicedetail() {
				uni.navigateTo({
					url: "/pages/callOutOrder/fapiaomx"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.beihuolable {
		background-color: #fff3e6;
		padding: 5rpx 10rpx;
		border: 1rpx solid #FF8505;
	}

	.posibottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}
	// 開發票央視
	.vote1Img {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	
	.vote2Img {
		width: 23.5rpx;
		height: 23.5rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	
	.vote3Img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	
	.vote4Img {
		width: 27rpx;
		height: 27rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	
	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	
	.select {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		position: relative;
	}
	
	.select::after {
		content: '';
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url('/static/images/mine/invoice_select.png');
		background-size: 100% 100%;
	}
	
	.invoiceInput {
		width: 100%;
		height: 91rpx;
		background: rgba(196, 196, 196, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	
		input {
			width: 80%;
		}
	}
</style>